<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <title>MES问题快反类型维护</title>
  <style>
    /* 表单校验成功反馈图标 */
    .el-icon-circle-check {
      color: #67c23a;
    }

    #grid .el-empty {
      padding: 0;
    }

    #grid .el-empty__description {
      margin-top: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <!-- 报表标题 -->
    <vue2-report-header :title="'MES问题快反类型维护'"></vue2-report-header>
    <div style="padding:10px;">
      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" style="margin: 10px" :label-position="'left'"
        :disabled="btnDisabled">
        <el-form-item label="组织结构:" prop="selectOrg">
          <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="bpmOrginazitionRef" filterable
            v-model="queryInfo.selectOrg" clearable style="width:400px;">
          </el-cascader>
        </el-form-item>

        <el-form-item label="创建人:">
          <el-select v-model="queryInfo.createuser" placeholder="请选择创建人" clearable filterable style="width: 500px;">
            <el-option v-for="u in createUserList" :key="u.username" :label="u.username" :value="u.username">
              <span style="float: left;">{{u.username}}</span>
              <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="问题快反类型:">
          <el-input v-model.trim="queryInfo.problemtype" placeholder="请输入问题快反类型"></el-input>
        </el-form-item>

        <el-form-item label="角色:">
          <el-select v-model="queryInfo.rolename" placeholder="请选择角色" clearable filterable>
            <el-option :key="'流程主管'" :label="'流程主管'" :value="'流程主管'"></el-option>
            <el-option :key="'处室'" :label="'处室'" :value="'处室'"></el-option>
            <el-option :key="'副厂级'" :label="'副厂级'" :value="'副厂级'"></el-option>
            <el-option :key="'厂级'" :label="'厂级'" :value="'厂级'"></el-option>
            <el-option :key="'副部长'" :label="'副部长'" :value="'副部长'"></el-option>
            <el-option :key="'部长'" :label="'部长'" :value="'部长'"></el-option>
            <el-option :key="'生产部部长'" :label="'生产部部长'" :value="'生产部部长'"></el-option>
            <el-option :key="'公司领导'" :label="'公司领导'" :value="'公司领导'"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="人员:">
          <el-autocomplete v-model.trim="queryInfo.bpmuser" placeholder="请输入姓名" :trigger-on-focus="false"
            :fetch-suggestions="getBpmUserAsync" :value-key="'fullname'" :debounce="500" style="width:300px;">
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="启用状态:">
          <el-select v-model="queryInfo.status" placeholder="请选择" clearable filterable style="width:120px;">
            <el-option :key="'已启用'" :label="'已启用'" :value="'1'"></el-option>
            <el-option :key="'未启用'" :label="'未启用'" :value="'0'"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>
          <el-button type="primary" icon="el-icon-download" size="small" @click="getExportExcel">导出</el-button>
          <el-button type="success" icon="el-icon-circle-plus-outline" size="small" @click="showAddDialog">添加
          </el-button>
          <el-button type="warning" icon="el-icon-user-solid" size="small" @click="showChangeUserDialog">批量修改人员
          </el-button>
          <el-button type="warning" icon="el-icon-setting" size="small" @click="showChangeOrgDialog">批量修改组织
          </el-button>
          <el-button type="danger" icon="el-icon-warning-outline" size="small" @click="showChangeAllUserDialog">修改全部
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <div id="grid">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中"
          element-loading-background="rgba(0,0,0,0.8)" :data="dataList" stripe border
          @selection-change="handlerSelectionChange">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"
                :disabled="scope.row.employeeid !== employeeid">修改
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="创建人" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.createuserimages">
                <el-image style="width:48px;height: 48px;" :src="scope.row.createuserimages"
                  :preview-src-list="[scope.row.createuserimages]">
                </el-image>
              </div>
              <div v-else>
                <el-image style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
              </div>
              <div v-if="scope.row.createuser">
                {{scope.row.createuser}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="问题快反类型" prop="problemtype" width="180" show-overflow-tooltip></el-table-column>
          <el-table-column label="分厂/工区/班组" prop="orginfo" show-overflow-tooltip></el-table-column>
          <el-table-column label="流程主管" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.lczguserimages">
                <el-image style="width:48px;height: 48px;" :src="scope.row.lczguserimages"
                  :preview-src-list="[scope.row.lczguserimages]">
                </el-image>
              </div>
              <div v-else>
                <el-image style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
              </div>
              <div v-if="scope.row.lczg">
                {{scope.row.lczg.split('<')[1].replace('>','')}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="处室级" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.csuserimages">
                <el-image style="width:48px;height: 48px;" :src="scope.row.csuserimages"
                  :preview-src-list="[scope.row.csuserimages]">
                </el-image>
              </div>
              <div v-else>
                <el-image style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
              </div>
              <div v-if="scope.row.cs">
                {{scope.row.cs.split('<')[1].replace('>','')}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="副厂级" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.fcjuserimages">
                <el-image style="width:48px;height: 48px;" :src="scope.row.fcjuserimages"
                  :preview-src-list="[scope.row.fcjuserimages]">
                </el-image>
              </div>
              <div v-else>
                <el-image style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
              </div>
              <div v-if="scope.row.fcj">
                {{scope.row.fcj.split('<')[1].replace('>','')}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="厂级" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.cjuserimages">
                <el-image style="width:48px;height: 48px;" :src="scope.row.cjuserimages"
                  :preview-src-list="[scope.row.cjuserimages]">
                </el-image>
              </div>
              <div v-else>
                <el-image style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
              </div>
              <div v-if="scope.row.cj">
                {{scope.row.cj.split('<')[1].replace('>','')}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="副部长" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.fbz">
                <el-image v-if="scope.row.fbzuserimages" style="width:48px;height: 48px;" :src="scope.row.fbzuserimages"
                  :preview-src-list="[scope.row.fbzuserimages]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <div>
                  {{scope.row.fbz.split('<')[1].replace('>','')}}
                </div>
              </div>
              <div v-else>
                <el-empty :image-size="48" description="未维护"></el-empty>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="部长" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.bz">
                <el-image v-if="scope.row.bzuserimages" style="width:48px;height: 48px;" :src="scope.row.bzuserimages"
                  :preview-src-list="[scope.row.bzuserimages]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <div>
                  {{scope.row.bz.split('<')[1].replace('>','')}}
                </div>
              </div>
              <div v-else>
                <el-empty :image-size="48" description="未维护"></el-empty>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="生产部审核" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.fzjl">
                <el-image v-if="scope.row.fzjluserimages" style="width:48px;height: 48px;"
                  :src="scope.row.fzjluserimages" :preview-src-list="[scope.row.fzjluserimages]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <div>
                  {{scope.row.fzjl.split('<')[1].replace('>','')}}
                </div>
              </div>
              <div v-else>
                <el-empty :image-size="48" description="未维护"></el-empty>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="公司领导" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.ld">
                <el-image v-if="scope.row.lduserimages" style="width:48px;height: 48px;" :src="scope.row.lduserimages"
                  :preview-src-list="[scope.row.lduserimages]">
                </el-image>
                <el-image v-else style="width:48px;height: 48px;" :src="'../images/person_blue.png'">
                </el-image>
                <div>
                  {{scope.row.ld.split('<')[1].replace('>','')}}
                </div>
              </div>
              <div v-else>
                <el-empty :image-size="48" description="未维护"></el-empty>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="启用状态" prop="status" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" active-text="启用" :disabled="scope.row.employeeid !== employeeid"
                inactive-text="" @change="changeStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="155">
            <template slot-scope="scope">
              <span>{{scope.row.createdate.replace('T',' ')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="变更时间" width="155">
            <template slot-scope="scope">
              <span>{{scope.row.updatedate.replace('T',' ')}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.currentPage" :page-sizes="[15,20,50,100]" :page-size="queryInfo.pageSize"
          layout="prev,pager,next,jumper,sizes,total" :total="total">
        </el-pagination>
        <!-- 回到顶部 -->
        <el-backtop></el-backtop>
      </div>

      <!-- 问题类型修改弹出窗 -->
      <el-dialog title="修改问题快反类型" :visible.sync="editDialogVisible" width="80%" @close="editDialogClose">
        <el-form :model="editForm" :rules="editFormRule" ref="editFormRef" :inline="true" :label-position="'top'"
          lable-width="100px" status-icon>
          <div>
            <el-form-item label="问题快反类型" prop="problemtype">
              <el-input v-model="editForm.problemtype" style="width:800px;" autocomplete="off"></el-input>
            </el-form-item>
          </div>

          <el-form-item label="唯一id">
            <el-input v-model="editForm.id" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="创建人">
            <el-input v-model="editForm.createuser" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="创建时间">
            <el-input v-model="editForm.createdate" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="分厂">
            <el-input v-model="editForm.factoryname" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="工区">
            <el-input v-model="editForm.workcenter" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="班">
            <el-input v-model="editForm.shiftname" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="组">
            <el-input v-model="editForm.teamname" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="流程主管" prop="lczg">
            <el-select v-model="editForm.lczg" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.lczg" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="处室" prop="cs">
            <el-select v-model="editForm.cs" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.cs" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="副厂级" prop="fcj">
            <el-select v-model="editForm.fcj" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.fcj" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="厂级" prop="cj">
            <el-select v-model="editForm.cj" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.cj" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="副部长" prop="fbz">
            <el-select v-model="editForm.fbz" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.fbz" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="部长" prop="bz">
            <el-select v-model="editForm.bz" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.bz" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="生产部部长" prop="fzjl">
            <el-select v-model="editForm.fzjl" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.fzjl" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="公司领导" prop="ld">
            <el-select v-model="editForm.ld" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.ld" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <div>
            <el-form-item label="修改分厂/工区/班组" prop="org">
              <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
                v-model="editForm.org" clearable style="width:680px;">
              </el-cascader>
            </el-form-item>
          </div>

        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editBtnConfirm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 新增问题快反问题类型 -->
      <el-dialog title="新增问题快反类型" :visible.sync="addDialogVisible" width="80%" @close="addDialogClose">
        <el-form :model="addForm" :rules="addFormRule" ref="addFormRef" :inline="true" lable-width="100px"
          :label-position="'top'" status-icon>
          <div>
            <el-form-item label="问题快反类型" prop="problemtype">
              <el-input v-model="addForm.problemtype" style="width:680px;" placeholder="请输入问题快反类型"></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="选择分厂/工区/班组" prop="org">
              <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
                v-model="addForm.org" clearable style="width:680px;">
              </el-cascader>
            </el-form-item>
          </div>

          <el-form-item label="流程主管" prop="lczg">
            <el-select v-model="addForm.lczg" palaceholder="请选择" filterable clearable>
              <el-option v-for="u in userInfo.lczg" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="处室" prop="cs">
            <el-select v-model="addForm.cs" palaceholder="请选择" filterable clearable>
              <el-option v-for="u in userInfo.cs" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="副厂级" prop="fcj">
            <el-select v-model="addForm.fcj" palaceholder="请选择" filterable clearable>
              <el-option v-for="u in userInfo.fcj" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="厂级" prop="cj">
            <el-select v-model="addForm.cj" palaceholder="请选择" filterable clearable>
              <el-option v-for="u in userInfo.cj" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="副部长" prop="fbz">
            <el-select v-model="addForm.fbz" palaceholder="请选择" filterable clearable>
              <el-option v-for="u in userInfo.fbz" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="部长" prop="bz">
            <el-select v-model="addForm.bz" palaceholder="请选择" filterable clearable>
              <el-option v-for="u in userInfo.bz" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="生产部部长" prop="fzjl">
            <el-select v-model="addForm.fzjl" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.fzjl" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="公司领导" prop="ld">
            <el-select v-model="addForm.ld" palaceholder="请选择" filterable style="width:100%;" clearable>
              <el-option v-for="u in userInfo.ld" :key="u.username" :label="u.username" :value="u.username">
                <span style="float: left;">{{u.username}}</span>
                <span style="float: right;color:#8492a6;font-size: 13px;">{{u.orginfo}}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBtnConfirm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 批量修改节点人员 -->
      <el-dialog title="批量修改节点人员" :visible.sync="changeUserDialogVisible" width="50%" @close="changeUserDialogClose">
        <el-form :model="changeUserForm" :rules="changeUserRule" ref="changeUserRef" lable-width="100px"
          :label-position="'top'" status-icon>
          <el-form-item label="角色:" prop="rolename">
            <el-select v-model="changeUserForm.rolename" placeholder="请选择角色" clearable filterable style="width: 100%;">
              <el-option :key="'流程主管'" :label="'流程主管'" :value="'流程主管'"></el-option>
              <el-option :key="'处室'" :label="'处室'" :value="'处室'"></el-option>
              <el-option :key="'副厂级'" :label="'副厂级'" :value="'副厂级'"></el-option>
              <el-option :key="'厂级'" :label="'厂级'" :value="'厂级'"></el-option>
              <el-option :key="'副部长'" :label="'副部长'" :value="'副部长'"></el-option>
              <el-option :key="'部长'" :label="'部长'" :value="'部长'"></el-option>
              <el-option :key="'生产部部长'" :label="'生产部部长'" :value="'生产部部长'"></el-option>
              <el-option :key="'公司领导'" :label="'公司领导'" :value="'公司领导'"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop='bpmuser' label="人员:">
            <el-autocomplete v-model="changeUserForm.bpmuser" placeholder="请输入姓名" :trigger-on-focus="false"
              :fetch-suggestions="getBpmUserAsync" :value-key="'fullname'" :debounce="500" style="width:100%;">
            </el-autocomplete>
          </el-form-item>

        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changeUserBtnConfirm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 批量修改组织 -->
      <el-dialog title="批量修改组织" :visible.sync="changeOrgDialogVisible" width="50%" @close="changeOrgDialogClose">
        <el-form :model="changeOrgForm" :rules="changeOrgRule" ref="changeOrgRef" lable-width="100px"
          :label-position="'top'" status-icon>
          <el-form-item label="选择分厂/工区/班组" prop="org">
            <el-cascader :options="orginazition" :props="{ checkStrictly: true}" v-model="changeOrgForm.org" clearable
              ref="cascaderRef" style="width:680px;">
            </el-cascader>
          </el-form-item>
        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeOrgDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changeOrgBtnConfirm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改全部对话框 -->
      <el-dialog title="修改全部节点人员" :visible.sync="changeAllUserDialogVisible" width="50%"
        @close="changeAllUserDialogClose">
        <el-form :model="changeAllUserForm" :rules="changeAllUserRule" ref="changeAllUserRef" lable-width="100px"
          :label-position="'top'" status-icon>
          <el-form-item label="角色:" prop="rolename">
            <el-select v-model="changeAllUserForm.rolename" placeholder="请选择角色" clearable filterable
              style="width: 100%;">
              <el-option :key="'流程主管'" :label="'流程主管'" :value="'流程主管'"></el-option>
              <el-option :key="'处室'" :label="'处室'" :value="'处室'"></el-option>
              <el-option :key="'副厂级'" :label="'副厂级'" :value="'副厂级'"></el-option>
              <el-option :key="'厂级'" :label="'厂级'" :value="'厂级'"></el-option>
              <el-option :key="'副部长'" :label="'副部长'" :value="'副部长'"></el-option>
              <el-option :key="'部长'" :label="'部长'" :value="'部长'"></el-option>
              <el-option :key="'生产部部长'" :label="'生产部部长'" :value="'生产部部长'"></el-option>
              <el-option :key="'公司领导'" :label="'公司领导'" :value="'公司领导'"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop='bpmuser' label="人员:">
            <el-autocomplete v-model="changeAllUserForm.bpmuser" placeholder="请输入姓名" :trigger-on-focus="false"
              :fetch-suggestions="getBpmUserAsync" :value-key="'fullname'" :debounce="500" style="width:100%;">
            </el-autocomplete>
          </el-form-item>

        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeAllUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changeAllUserBtnConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

  <script type="module">
    import { getParams, fetchSuggestion, getUserWhiteList, exportExcelData } from '../Scripts/hooks/useCommonMethod.js'
    import { getBPMOrginazition } from '../Scripts/hooks/fetchAPI.js'
    import Vue2ReportHeader from '../Scripts/components/Vue2ReportHeader.js'
    const app = new Vue({
      el: '#app',
      components: { Vue2ReportHeader },
      data: {
        queryInfo: {
          selectOrg: [],
          createuser: '',
          rolename: '',
          bpmuser: '',
          status: '',//启用状态
          problemtype: '',//问题快反类型
          currentPage: 1,//当前页
          pageSize: 15//每页显示条数
        },
        total: 0,
        employeeid: '',
        employeename: '',//页面当前用户姓名
        fullname: '',
        userInfo: {
          lczg: [],//流程主管
          cs: [],//处室
          fcj: [],//副厂级
          cj: [],//厂级
          fbz: [],//副部长
          bz: [],//部长
          fzjl: [],//生产部长
          ld: []//公司领导
        },
        orginazition: [],
        createUserList: [],// 创建人
        loading: false,
        dataList: [],
        factoryList: [],
        workcenterList: [],
        editDialogVisible: false,//对话框默认隐藏
        editForm: {},
        editFormRule: {
          problemtype: [{ required: true, message: '问题快反类型不能为空', trigger: 'blur' }],
          lczg: [{ required: true, message: '流程主管不能为空', trigger: 'change' }],
          cs: [{ required: true, message: '处室不能为空', trigger: 'change' }],
          fcj: [{ required: true, message: '副厂级不能为空', trigger: 'change' }],
          cj: [{ required: true, message: '厂级不能为空', trigger: 'change' }],
          fbz: [{ required: true, message: '副部长不能为空', trigger: 'change' }],
          bz: [{ required: true, message: '部长不能为空', trigger: 'change' }],
          fzjl: [{ required: true, message: '生产部部长不能为空', trigger: 'change' }],
          ld: [{ required: true, message: '公司领导不能为空', trigger: 'change' }],
          org: [
            { required: true, message: '分厂/工区/班组不能为空', trigger: 'change' },
            //{ required: true, message: '必须得选择工区', trigger: 'change', type: 'array', min: 2 }
          ]
        },
        orginazition: [],//组织结构
        addDialogVisible: false,//添加对话框
        addForm: {},
        addFormRule: {
          problemtype: [{ required: true, message: '问题快反类型不能为空', trigger: 'blur' }],
          lczg: [{ required: true, message: '流程主管不能为空', trigger: 'change' }],
          cs: [{ required: true, message: '处室不能为空', trigger: 'change' }],
          fcj: [{ required: true, message: '副厂级不能为空', trigger: 'change' }],
          cj: [{ required: true, message: '厂级不能为空', trigger: 'change' }],
          fbz: [{ required: true, message: '副部长不能为空', trigger: 'change' }],
          bz: [{ required: true, message: '部长不能为空', trigger: 'change' }],
          fzjl: [{ required: true, message: '生产部部长不能为空', trigger: 'change' }],
          ld: [{ required: true, message: '公司领导不能为空', trigger: 'change' }],
          org: [
            { required: true, message: '分厂/工区/班组不能为空', trigger: 'change' }
          ]
        },
        // 白名单
        whiteList: [],
        superAdminList: [],//信息中心管理员
        changeUserDialogVisible: false,//批量修改人员对话框
        changeOrgDialogVisible: false,//批量修改组织对话框
        changeUserForm: { rolename: '', bpmuser: '' },
        changeUserRule: {
          rolename: [{ required: true, message: '角色不能为空', trigger: 'change' }],
          bpmuser: [{ required: true, message: '人员不能为空', trigger: 'blur' }]
        },
        multipleSelection: [],
        changeAllUserDialogVisible: false,//修改全部对话框
        changeAllUserForm: { rolename: '', bpmuser: '' },
        changeAllUserRule: {
          rolename: [{ required: true, message: '角色不能为空', trigger: 'change' }],
          bpmuser: [{ required: true, message: '人员不能为空', trigger: 'blur' }]
        },
        btnDisabled: false,
        changeOrgForm: { org: [] },
        changeOrgRule: { org: [{ required: true, message: '分厂/工区/班组不能为空', trigger: 'change' }] }
      },
      methods: {
        // 查询BPM人员
        getBpmUserAsync(value, callback) {
          fetchSuggestion({ actionName: 'getBpmUserAsync', name: 'fullname', value, callback, triggerLength: 1 })
        },
        // 查询信息中心管理员
        async getSuperAdminUsers() {
          const { data: res } = await axios({
            method: 'POST',
            url: '../handler/report/FeedbackTypeMaint.ashx?action=getSuperAdmin',
            data: { type: 'getSuperAdmin' }
          });
          for (const i of res.data) {
            this.superAdminList.push(i.employeeid);
          }
        },
        // 查询BPM分厂
        async getFactory() {
          const { data: res } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=getFactory', {
            type: 'getFactory',
          })
          this.factoryList = res.data;
        },
        // 查询当前用户信息
        async getEmployeInfo(employeeid) {
          const { data: res } = await axios({
            method: 'POST',
            url: '../handler/report/CommonActionHandle.ashx?action=getEmployeInfo',
            data: {
              type: 'getEmployeInfo',
              employeeid
            }
          })
          if (res.data.length > 0) {
            this.employeename = res.data[0].employeename;
            this.fullname = res.data[0].fullname;
          } else {
            this.btnDisabled = true;
            return this.$notify.error({ title: '错误', message: '用户不存在!', duration: 0 });
          }
        },
        // 查询数据
        async getData() {
          let org = [];
          const checkNode = this.$refs["bpmOrginazitionRef"].getCheckedNodes()
          if (checkNode.length > 0) {
            for (const node of checkNode) {
              node.pathNodes.map(item => {
                const { label, value } = item;
                org.push({ label, value });
              })
            }
          }

          this.loading = true
          const { data: { data, meta, total } } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=getData', {
            ...this.queryInfo,
            org,
            type: 'getData'
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.dataList = data.map(item => {
            return { ...item, status: item.status === 1 }; //将【启用状态】由字符串变更为布尔值
          })
          this.total = total;
        },
        // 获取组织结构
        async getOrginazition() {
          const { data: res } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=getOrginazition', {
            type: 'getOrginazition'
          })
          this.orginazition = res.data;
        },
        // 获取人员信息
        async getUserInfo() {
          const { data: res } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=getUserInfo', {
            type: 'getUserInfo'
          })
          this.userInfo = { ...res.data }
        },
        // 查询创建人
        async getCreateUser() {
          const { data: res } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=getCreateUser', {
            type: 'getCreateUser'
          })
          this.createUserList = res.data;
        },
        // 更新
        async update(org) {
          const { data: res } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=update', {
            type: 'update',
            ...this.editForm,
            selectedOrg: org
          });
          if (res.meta.status == 200) {
            this.$message.success('更新成功')
            this.getData();
          } else {
            this.$message.error('更新失败');
          }
        },
        // 监听 页码值 改变的事件
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        // 监听 pagesize 改变的事件
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        },
        // 修改--对话框打开
        showEditDialog(row) {
          this.editForm = { ...row }
          this.editDialogVisible = true;
        },
        // 新增--对话框打开
        showAddDialog() {
          if (!this.employeename) {
            return this.$message.error('当前登陆用户不存在')
          }
          if (this.whiteList.indexOf(this.employeeid) === -1) {
            return this.$message.error('该用户没有【添加】的权限!');
          }
          this.addDialogVisible = true;
        },
        // 修改--对话框关闭时
        editDialogClose() {
          this.$refs["editFormRef"].resetFields();
        },
        // 新增--对话框关闭时
        addDialogClose() {
          this.$refs["addFormRef"].resetFields();
          this.addForm = {}
        },
        // 修改--点击确定
        editBtnConfirm() {
          this.$refs["editFormRef"].validate((valid) => {
            if (valid) {
              let org = [];
              this.$refs["orginazitionRef"].getCheckedNodes()[0].pathNodes.map(item => {
                const { label, value } = item;
                org.push({ label, value });
              })
              //更新
              this.update(org);
            }
          })
        },
        // 新增--点击确定
        addBtnConfirm() {
          this.$refs["addFormRef"].validate((valid) => {
            if (valid) {
              let org = [];
              this.$refs["orginazitionRef"].getCheckedNodes()[0].pathNodes.map(item => {
                const { label, value } = item;
                org.push({ label, value });
              })
              if (this.addForm.problemtype.trim() === '') {
                return this.$message.error('问题快反类型不能为空');
              }
              // 新增
              this.add(org);
            }
          })
        },
        // 新增问题类型
        async add(org) {
          const { data: res } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=addProblemType', {
            type: 'addProblemType',
            ...this.addForm,
            problemtype: this.addForm.problemtype.trim(),
            employeename: this.employeename,
            selectedOrg: org
          })
          if (res.meta.status === 200 && res.total > 0) {
            this.$message.success(res.meta.msg);
          } else {
            this.$message.error(res.meta.msg);
          }
          this.addDialogVisible = false;
          this.getData();
        },
        // 切换启用状态
        async changeStatus(row) {
          if (this.whiteList.indexOf(this.employeeid) === -1) {
            row.status = !row.status;
            return this.$message.error('该用户无权更改启用状态');
          }
          // 更新启用状态前确认
          const confirmResult = await this.$confirm('是否切换该问题类型启用状态?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 取消切换
          if (confirmResult !== 'confirm') {
            row.status = !row.status;
            return this.$message.info('已取消切换!');
          }

          const { data: res } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=changeStatus', {
            type: 'changeStatus',
            id: row.id,
            employeename: this.employeename,
            status: row.status
          });

          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg);
          }

          if (res.total > 0) {
            this.$message.success('问题类型启用状态切换成功');
            this.getData();
          } else {
            return this.$message.error('问题类型启用状态切换失败');
          }
        },
        // 导出excel
        async getExportExcel() {
          const config = {
            url: '../handler/report/FeedbackTypeMaint.ashx?action=exportExcel',
            data: {
              type: 'exportExcel',
              ...this.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        // 表格选择事件
        handlerSelectionChange(val) {
          this.multipleSelection = val;
        },
        // 批量修改人员对话框打开时
        showChangeUserDialog() {
          if (this.whiteList.indexOf(this.employeeid) == -1) {
            return this.$message.error('该用户没有【批量修改】的权限!');
          }
          if (this.multipleSelection.length == 0) {
            return this.$message.error('请至少勾选1条待修改的数据!');
          }
          if (this.superAdminList.indexOf(this.employeeid) == -1) {
            if (this.multipleSelection.filter(i => i.employeeid === this.employeeid).length == 0) {
              return this.$message.error('所选的数据该用户都无权修改!');
            }
          }
          this.changeUserDialogVisible = true;
        },
        // 批量修改组织对话框打开时
        showChangeOrgDialog() {
          if (this.whiteList.indexOf(this.employeeid) == -1) {
            return this.$message.error('该用户没有【批量修改】的权限!');
          }
          if (this.multipleSelection.length == 0) {
            return this.$message.error('请至少勾选1条待修改的数据!');
          }
          if (this.superAdminList.indexOf(this.employeeid) == -1) {
            if (this.multipleSelection.filter(i => i.employeeid === this.employeeid).length == 0) {
              return this.$message.error('所选的数据该用户都无权修改!');
            }
          }
          this.changeOrgDialogVisible = true;
        },
        // 批量更新人员点击确认
        changeUserBtnConfirm() {
          this.$refs['changeUserRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空!');
            } else {
              const { rolename, bpmuser } = this.changeUserForm;
              const { data: ckRes } = await axios({
                method: 'POST',
                url: '../handler/report/FeedbackTypeMaint.ashx?action=checkSelectUserIsExists',
                data: { type: 'checkSelectUserIsExists', bpmuser }
              });

              if (ckRes.total === 0) {
                return this.$message.error('人员不存在!');
              }

              // 批量更新前确认
              const confirmResult = await this.$confirm(`确认要将角色为【${rolename}】的用户批量更改为【${bpmuser}】吗？该操作无法撤销，请仔细检查并确认!`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).catch(err => err)

              // 取消切换
              if (confirmResult !== 'confirm') {
                return this.$message.info('用户已取消批量更改!');
              }

              let selectData = [];
              if (this.superAdminList.indexOf(this.employeeid) > -1) {
                selectData = this.multipleSelection;
              } else {
                selectData = this.multipleSelection.filter(i => i.employeeid === this.employeeid);
              }

              const { data: res } = await axios({
                method: 'POST',
                url: '../handler/report/FeedbackTypeMaint.ashx?action=changeUserBatch',
                data: { type: 'changeUserBatch', ...this.changeUserForm, selectData }
              });

              if (res.meta.status === 500) {
                return this.$message.error(res.meta.msg);
              }

              if (res.total > 0) {
                this.$message.success('批量更新成功');
                this.changeUserDialogVisible = false;
                this.getData();
              } else {
                return this.$message.error('批量更新失败');
              }
            }
          })
        },
        // 批量更新组织点击确认
        changeOrgBtnConfirm() {
          this.$refs['changeOrgRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空!');
            }
            // 批量更新前确认
            const confirmResult = await this.$confirm(`确认要批量更新吗？该操作无法撤销，请确认!`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).catch(err => err)

            // 取消切换
            if (confirmResult !== 'confirm') {
              return this.$message.info('用户已取消批量更改!');
            }

            let selectData = [];
            if (this.superAdminList.indexOf(this.employeeid) > -1) {
              selectData = this.multipleSelection;
            } else {
              selectData = this.multipleSelection.filter(i => i.employeeid === this.employeeid);
            }

            let org = [];
            this.$refs["cascaderRef"].getCheckedNodes()[0].pathNodes.map(item => {
              const { label, value } = item;
              org.push({ label, value });
            })

            const { data: res } = await axios({
              method: 'POST',
              url: '../handler/report/FeedbackTypeMaint.ashx?action=changeOrgBatch',
              data: { type: 'changeOrgBatch', selectedOrg: org, selectData }
            });

            if (res.meta.status === 500) {
              return this.$message.error(res.meta.msg);
            }

            if (res.total > 0) {
              this.$message.success('批量更新成功');
              this.changeOrgDialogVisible = false;
              this.getData();
            } else {
              return this.$message.error('批量更新失败');
            }
          })
        },
        // 批量更新人员对话框关闭时
        changeUserDialogClose() {
          this.$refs['changeUserRef'].resetFields();
        },
        // 批量更新组织对话框关闭时
        changeOrgDialogClose() {
          this.$refs['changeOrgRef'].resetFields();
        },
        // 全部修改对话框打开时
        showChangeAllUserDialog() {
          if (this.superAdminList.indexOf(this.employeeid) == -1) {
            return this.$message.error('该用户没有【修改全部】的权限!');
          }
          this.changeAllUserDialogVisible = true;
        },
        // 全部修改点击确认
        changeAllUserBtnConfirm() {
          this.$refs['changeAllUserRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空!');
            } else {
              const { rolename, bpmuser } = this.changeAllUserForm;
              const { data: ckRes } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=checkSelectUserIsExists', {
                type: 'checkSelectUserIsExists',
                bpmuser
              });

              if (ckRes.total === 0) {
                return this.$message.error('人员不存在!');
              }

              // 批量更新前确认
              const confirmResult = await this.$confirm(`确认要将角色为【${rolename}】的用户全部更改为【${bpmuser}】吗？该操作无法撤销，请仔细检查并确认!`, '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              }).catch(err => err)

              // 取消切换
              if (confirmResult !== 'confirm') {
                return this.$message.info('用户已取消修改全部!')
              }

              const { data: res } = await axios.post('../handler/report/FeedbackTypeMaint.ashx?action=updateAll', {
                type: 'updateAll',
                ...this.changeAllUserForm
              });

              if (res.meta.status === 500) {
                return this.$message.error(res.meta.msg);
              }

              if (res.total > 0) {
                this.$message.success('更新成功');
                this.changeAllUserDialogVisible = false;
                this.getData();
              } else {
                return this.$message.error('更新失败');
              }
            }
          })
        },
        // 全部更新对话框关闭时
        changeAllUserDialogClose() {
          this.$refs['changeAllUserRef'].resetFields();
        }
      },
      async created() {
        if (!getParams('uid')) {
          this.btnDisabled = true;
          return this.$notify.error({ title: '错误', message: '缺少用户信息!', duration: 0 });
        }
        // 获取用户权限白名单
        const pageurl = window.location.pathname.split('/')[3];
        this.whiteList = await getUserWhiteList(pageurl, this.$message);
        this.getFactory();
        this.getOrginazition();
        this.getUserInfo();
        this.getCreateUser();
        this.employeeid = getParams("uid");
        this.getEmployeInfo(this.employeeid);
        this.getSuperAdminUsers();
        this.orginazition = await getBPMOrginazition();
      },
      watch: {
        queryInfo: { handler() { this.queryInfo.currentPage = 1 }, deep: true }
      }
    })
  </script>
</body>

</html>